<template>
    <view
        class="layout list my-8 sm:my-24 grid grid-cols-2 gap-6 sm:gap-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
        <movie-card
            v-for="item in collectslist"
            :key="item.id"
            :movie="item"
            :is-collected="true"
            @collect="hadnleCollect" />
    </view>
</template>

<script setup lang="ts">
import { addCollectAPI, deleteCollectAPI, getCollectAPI, getCollectsAPI, getMoviesAPI } from "@/api";
import MovieCard from "@/components/movie-card/index.vue";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

const collectslist = ref<any[]>([]);

const getList = async () => {
    const res = await getCollectsAPI(userStore.userinfo.id);
    collectslist.value = res;
};

onMounted(() => {
    getList();
});

const hadnleCollect = async (status: boolean, collectData: any) => {
    const { id: dataId, ...data } = collectData;
    if (status) {
        // await addCollectAPI(userStore.userinfo.id, dataId, data);
    } else {
        await deleteCollectAPI(dataId);
        getList();
    }
};
</script>

<style scoped lang="scss"></style>
